<template>
  <div class="yxp-paper" id="yxp:paper:2">
    <!-- <div id="yx:paper:3" class="pad-mask" v-show="isPadMask>0"></div> -->
    <div class="yxp-paper-top">
      <img src="@/assets/word/paper-back-icon.png" class="yxp-paper-top-l" @click="handleBack"/>
      <div class="yxp-paper-top-r">
        <span id="yxp:paper:7" @click="handleCheck">混组检查</span>
        <span id="yxp:paper:8" v-show="!isFinish">再查一遍</span>
        <span id="yxp:paper:9" v-show="isFinish" @click="handleAgain">再查一遍</span>
      </div>
    </div>
    <div class="yxp-paper-list" v-show="data.status">
      <img src="@/assets/word/paper-bg.png" class="paper-bg"/>
      <!-- <div class="curl" :style="{top: top + 'px'}" style="position: absolute;left: 50%;transform: translateX(-50%);width: 200px;height: 80px;background: #ff0000" ></div> -->
      <div class="yxp-paper-box" id="yxp:paper:15" v-if="isCenter" ref="paperBox">
        <div class="yxp-paper-flex" :class="{flex: isFlex}" id="box" >
          <div class="yxp-paper-list-item" :id="'yxp:paper:17:'+item.word" ref="ntl" v-for="(item,i) in fillList" :key="item.id" :data-s="item.num"  :class="{active: item.num > 0 && curIndex === i}" @click.stop="handlePlay(item,i,1)">
            <!-- <div class="item-box" v-show="item.isShow"> -->
              <div :id="'yxp:paper:19:'+item.word" class="item-l">
                <img :yxp_attr="isSuClick?'disable':''" class="synclock" :id="'yxp:paper:20:'+item.word" src="@/assets/word/success-normal.png" @click.stop="handleSuccess($event,item,i)"/>
                <!-- <img src="@/assets/word/success-normal.png" @mousedown="handleDown($event)" @mouseup="handleUp()" /> -->
                <span :id="'yxp:paper:22:'+item.word">{{item.word}}</span>
              </div>
              <div :id="'yxp:paper:24:'+item.word" class="item-r">
                <span :id="'yxp:paper:25:'+item.word" v-show="item.num === 2 && curIndex === i">{{item.translate}}</span>
                <img :yxp_attr="isErrorClick?'disable':''" class="synclock" :id="'yxp:paper:26:'+item.word" src="@/assets/word/error-normal.png" @click.stop="handleError($event,item,i)"/>
              </div>
            </div>
        </div>
      </div>
      <!-- <div class="curl" id="curl-box"> -->
        <!-- <transition @before-enter="beforeEnter" @> -->
        <!-- <div class="curl-paper" id="curl-paper" ref="curlPaper">
          <div class="inner-paper" id="inner-paper">{{smallWord}}</div>
        </div> -->
        <!-- </transition> -->
      <!-- </div> -->
    </div>
    <div id="yxp:paper:39" class="yxp-paper-bottom" ref="bottomBg">
      <div id="yxp:paper:40" class="yes" ref="bottomYes">
        <span id="yxp:paper:41" class="num">{{yesNum}}</span>
        <span id="yxp:paper:42" class="text">YES</span>
        <div id="yxp:paper:43" class="again-list">
          <div class="again-list-item" v-for="n in againNum" :key="n">{{n}}</div>
        </div>
      </div>
      <!-- <div id="yxp:paper:47" class="center" ref="bottomCenter" v-if="totalNum === 0">
        <img id="yxp:paper:48" src="@/assets/word/paper-center.png" v-if="!isOpen"/>
        <img id="yxp:paper:49" src="@/assets/word/paper-center-open.png" v-if="isOpen"/>
        <span id="yxp:paper:50" class="num">{{totalNum}}</span>
      </div> -->
      <div :yxp_attr="isClick || isNoClick || totalNum === 0?'disable':''" id="yxp:paper:52" class="center synclock"  @click="handleCenter($event)">
        <img id="yxp:paper:53" src="@/assets/word/paper-center.png" v-if="!isOpen"/>
        <img id="yxp:paper:54" src="@/assets/word/paper-center-open.png" v-if="isOpen"/>
        <span id="yxp:paper:55" class="num" v-if="!isOpen">{{totalNum}}</span>
      </div>
      <div id="yxp:paper:57" class="no" v-show="noNum === 0" ref="bottomNo">
        <span id="yxp:paper:58" class="num">{{noNum}}</span>
        <span id="yxp:paper:59" class="text">NO</span>
      </div>
       <div :yxp_attr="isNoClick || isClick?'disable':''" id="yxp:paper:61" class="no synclock" v-show="noNum > 0" @click="handleNo" ref="bottomNo">
        <span id="yxp:paper:62" class="num">{{noNum}}</span>
        <span id="yxp:paper:63" class="text">NO</span>
      </div>
    </div>
    <div class="yxp-paper-pop" v-if="isShow">
      <div class="close" @click="isShow = false"></div>
      <h3 class="title">请选择你要混合的组</h3>
      <div class="paper-pop-list">
        <div class="paper-pop-list-item" v-for="(item,i) in inintData" :Key="i + 'm'" @click="handleGroup(item)">
          <template v-if="item.status">
            <img src="@/assets/word/group.png" v-if="!item.isCheck"/>
            <img src="@/assets/word/group-sel.png" v-else/>
            <p class="text">第{{item.page}}组</p>
          </template>
        </div>
      </div>
      <div class="btn" @click="handleRemember">开始检查</div>
    </div>
    <div class="mark" v-if="!data.status || isBack || isShow"></div>
    <div class="paper-simulate-list" id="paper-list" v-if="!data.status">
      <div class="paper-simulate-list-item synclock" :id="'yxp:paper:82:'+item.word" v-for="(item,i) in moveList" :Key="item.id" :data-s="item.num" :class="{active: item.num > 0}" @click.stop="handlePlay(item,i,0)">
        <div class="paper-simulate-list-item-l">{{item.word}}</div>
        <div class="paper-simulate-list-item-r" v-show="item.num === 2" >{{item.translate}}</div>
        <div :yxp_attr="!btn?'disable':''" :id="'yxp:paper:85:'+item.word" class="paper-simulate-list-item-draw synclock" v-show="curIndex === i"  @click.stop="handleSimulate($event,item.word,i)" :class="{'on': isSimulate}">
          <img src="@/assets/word/simulate.png" v-show="!isSimulate && isEnd"/>
          <img src="@/assets/word/animation.gif" v-show="isSimulate && isEnd" />
          <span></span>
        </div>
      </div>
      <!-- <div class="curl-paper" ref="simu-Paper">
        <div class="inner-paper">{{smallWord}}</div>
      </div> -->
    </div>
    <audio ref="audio"></audio>
    <div class="curl-paper more-paper"  v-for="i of len" :key="'s' + i">
      <div class="inner-paper more-inner"></div>
    </div>
    <div class="curl-paper start-paper" id="curl-paper" ref="curlPaper" v-for="i of startLen" :key="'st' + i">
      <div class="inner-paper start-inner" id="inner-paper"></div>
    </div>
    <div class="paper-simulate-back" v-if="isBack">
      <img src="@/assets/word/close-icon.png" class="close" @click="isBack = false" />
      <img src="@/assets/word/paper-pop.png" class="paper" />
      <p class="tips">确实要返回识记吗？</p>
      <div class="btn">
        <div class="btn-item" @click="handlePrev">返回识记</div>
        <div class="btn-item" @click="isBack = false">取消</div>
      </div>
    </div>
      <Timetips ref="timetips"></Timetips>
  </div>
</template>
<script>
import $ from "jquery";
import storage from '@/utils/storage.js'
import { randomArr } from '@/services/composition.js'
import { randWord } from '@/utils/rand.js'
import Timetips from "@/components/Timetips";
export default {
  name: 'simulatePaper',
  components: {
    Timetips
  },
  data () {
    return {
      maskTime: 0,
      isPadMask: 0,
      curIndex: 0,
      isShow: false,
      isFirst: false,
      isSimulate: false,
      isOpen: false,
      isBack: false,
      totalNum: 0,
      yesNum: 0,
      noNum: 0,
      aniNum: 0,
      page: 1,
      data: [],
      inintData: [],
      noArr: [],
      delArr: [],
      dataList: [],
      selData: [],
      fillList: [],
      moveList: [],
      nowNum: 0,
      btn: true, // 默认点击事件
      isClick: false,
      errorTimer: null,
      isErrorClick: false,
      isSuClick: false,
      isNoClick: false,
      date: '',
      audio: null,
      isCenter: true,
      aniArr: [],
      noData: [],
      // iNow: 0,
      isPaper: false,
      isPaperRight: false,
      cNum: 0,
      isFlex: true,
      height: '',
      smallWord: '',
      againNum: 0,
      orderTimer: null,
      isFinish: true,
      isReload: false,
      domHeight: 0,
      len: 0,
      iNow: 0,
      isEnd: true,
      timer: null,
      timer1: null,
      timerSuccess: null,
      timerError: null,
      startLen: 0,
      startInow: 0
    }
  },
  // watch: {
  //   fillList (val, oldVal) {
  //     console.log(val.length)
  //     if (val.length > 5) {
  //       let box = this.$el.querySelector("#box")
  //       box.scrollTop = box.scrollHeight;
  //     }
  //   }
  // },
  destroyed () {
    delete window.__LIMIT_TIME__
  },
  beforeDestroy() {
    this.$refs.timetips.stopTimer();
    this.$refs.timetips.stopEndTimer();
  },
  created () {
    window.__LIMIT_TIME__ = -1
    if (this.$route.query.page) {
      this.page = this.$route.query.page
    }
    let data = storage.get('paperData')
    this.inintData = data
    this.data = data[this.page - 1]
    let dataList = this.data.data
    dataList.map((item,i) => {
      item.num = 0
      item.isShow = true
      this.aniArr.push(i)
    })
    this.dataList = JSON.parse(JSON.stringify(dataList))
    this.moveList = JSON.parse(JSON.stringify(dataList))
    this.startLen = this.moveList.length
    if (this.data.status) {
      this.totalNum = this.data.data.length
    }
  },
  // beforeRouteEnter (to,from,next) {
  //   console.log(to)
  //   console.log(from)
  //   if (to.name === 'simulatePaper' && from.name === null) {
  //     to.meta.isBack = false
  //     // to.meta.isPage = to.query.isPage === 1 ? to.query.page + 1 : to.query.page - 1
  //   }
  //   next()
  // },
  mounted () {
    console.log(document.body.clientWidth)
    this.audio = this.$refs.audio
    this.$nextTick(() => {
     // document.getElementById('paperBox').style.height = parseInt(window.getComputedStyle(this.$refs.paperBox).height) + 'px'
      this.height = +window.getComputedStyle(this.$refs.paperBox).height.replace('px','')
      
      console.log(this.height + '我的高都 、')
    })
    // window.onresize = () => {
    //   console.log(window.getComputedStyle(this.$refs.paperBox).height.replace('px',''), '==-=-resize')
    //   this.height = +window.getComputedStyle(this.$refs.paperBox).height.replace('px','')
    // }
    // $('#box').on('scroll', function () {
    //   console.log(this.scrollTop, '-=-=-=-scroll')
    // })
  },
  updated () {
    console.log('dom更新了')
  },
  methods: {
    handleSimulate (e,word,i) {
      if (!this.btn){
        console.log(new Date().getTime(), 'handleSimulate.lock', this.btn + '不能点击哈')
        return
      }
      if (this.btn) {
        this.btn = false
        this.isEnd = true
        this.isSimulate = true
        // this.isPadMask = new Date().getTime()
        setTimeout(() => {
          this.isEnd = false
          this.getAnimation(e,word,i)
          // setTimeout(() => {
          //   this.isPadMask = 0
          // }, this.maskTime)
        }, 1000)
      }
      
    },
    getAnimation (e,word,i) {
      console.log(e)
      const dom = document.getElementsByClassName('paper-simulate-list-item')
      let x = (document.body.offsetWidth - 600) / 2 + ((600 - 74) / 2) + 30
      let y = document.getElementById('paper-list').offsetTop + i * dom[0].offsetHeight + (dom[0].offsetHeight / 2)
      console.log(dom[i].offsetTop + '+++_+_+_+______________' + '_______' + dom[0].offsetHeight + '___________' + document.getElementById('paper-list').offsetTop)
      const dom1 = document.getElementsByClassName('start-paper')[this.startInow]
      const dom2 = dom1.getElementsByClassName('start-inner')[0]
      dom2.innerHTML = word
      // const dom1 = document.getElementById('curl-paper')
      // const dom2 = document.getElementById('inner-paper')
      // dom2.innerHTML = word
      // this.smallWord = word
      return new Promise((resolve) => {
        dom[i].style.transform = 'scale(.4)'
        dom[i].style.transition = 'all .35s ease-out'
        dom1.style.top = y + 'px'
        dom1.style.left = x + 'px'
        dom1.style.display = 'block'
        setTimeout(() => {
           dom[i].style.display = 'none'
          dom[i].style.transform = 'scale(1)'
          dom[i].style.transition = ''
          this.moveList.splice(i,1)
           
          this.btn = true
          this.isSimulate = false
          this.isEnd = true
          dom1.style.left = this.$refs.bottomBg.offsetLeft + 'px'
          dom1.style.transition = 'all .3s ease-out'
          dom1.style.top = this.$refs.bottomBg.offsetTop - 8 + 'px'
          dom2.style.transition = 'all .3s ease-out'
          this.isOpen = true
          
           this.startInow++
            if (this.fillList.length === 0) {
              this.startInow = 0
            }
            dom[i].style.display = 'flex'
          this.audio.src = 'https://data.e-school-kids.com/webcourse/word_in.mp3'
          this.audio.play().then((r)=>{}).catch((e)=>{})
          resolve()
        },355)
      }).then(() => {
        setTimeout(() => {
          this.totalNum++
          this.isOpen = false
          dom1.style.display = 'none'
          if (i >= this.moveList.length) {
            this.curIndex = this.moveList.length - 1
          }
          
          if (this.totalNum === this.dataList.length ) {
            this.$set(this.data, 'status', true)
            this.inintData[this.page - 1] = this.data
            storage.set('paperData', this.inintData)
            document.getElementById("box").scrollTop = 0
          }
        }, 302)
      })
    },
    handleSuccess (e,elem,i) {
      console.log(this.isSuClick + '绿ge')
      if (this.isSuClick) {
        console.log(new Date().getTime(), 'handleSuccess.lock')
        clearTimeout(this.isSuClick)
        return
      }
      this.$nextTick(() => {
      const dom = document.getElementsByClassName('yxp-paper-list-item')
      const su = dom[i].getElementsByTagName('img')[0]
      const yesDom = this.$refs.bottomYes
      console.log(yesDom.offsetLeft + '---' + yesDom.offsetTop + '---' + yesDom)
      console.log(su.offsetTop + '---' + su.y)
      //let x = su.x - su.offsetLeft + 300
      console.log(this.iNow + '================')
      const dom1 = document.getElementsByClassName('more-paper')[this.iNow]
      const dom2 = dom1.getElementsByClassName('more-inner')[0]
      dom2.innerHTML = elem.word
      let x = (document.body.clientWidth - 600) / 2 + 300
      let y = dom[i].offsetTop - document.getElementById("box").scrollTop + 85
      this.isSuClick = true
      return new Promise((resolve) => {
       dom[i].style.transform = 'scale(.36)'
       dom[i].style.transition = 'all .32s ease-out'
        dom1.style.top = y + dom[0].clientHeight / 2 - 20 + 'px'
       // dom1.style.left = x + 'px'
        // resolve()
        setTimeout(() => {
         dom[i].style.display = 'none'
         dom[i].style.transform = 'scale(1)'
         dom[i].style.transition = ''
         this.fillList.splice(i,1)
        //  let scrollTop = this.fillList.length * (this.domHeight + 20) - this.height
        //   // - Math.ceil(this.fillList.length / 11) * 3
        //  document.getElementById("box").scrollTop =  scrollTop
         dom1.style.display = 'block'
          dom1.style.left = this.$refs.bottomBg.offsetLeft - this.$refs.bottomYes.offsetLeft - 60+ 'px'
          dom1.style.transition = 'all .5s cubic-bezier(0.25,0.1,0.25,1)'
          dom1.style.top = this.$refs.bottomBg.offsetTop + this.$refs.bottomYes.offsetTop - 20 + 'px'
          dom2.style.transition = 'all .5s cubic-bezier(0.25,0.1,0.25,1)'
          this.isSuClick = false
          this.iNow++
          if (this.fillList.length === 0) {
            this.iNow = 0
          }
          console.log(this.iNow + '++++++++++++++' + i)
          this.curIndex = i > this.curIndex ? this.curIndex : this.curIndex - 1
          dom[i].style.display = 'flex'
          this.audio.src = 'https://data.e-school-kids.com/webcourse/word_in.mp3'
          this.audio.play().then((r)=>{}).catch((e)=>{})
           resolve()
        },322)
      }).then(() => {
        setTimeout(() => {
          console.log(this.fillList)
          dom1.style.display = 'none'
          dom1.style.left = '50%'
          dom1.style.top = 0
          dom1.style.transiton = ''
          dom2.style.transition = ''
          this.yesNum++
          // console.log(this.yesNum + '))))))')
          // this.len = this.fillList.length
          // this.makeLockTask(e, 'unlock')
         // this.yesNum++
          this.nowNum--
          this.againNum = this.yesNum
          console.log(document.getElementById("box").scrollTop + '这里的滚动条高度')
          // setTimeout(() => {
          //   this.isPadMask = 0
          // }, this.maskTime)
        }, 500)
      })
      })
    },
    makeLockTask (e, cmd = 'lock', size = {}, dom) {
      let id = e.target.__id__ || `yxp:a:${new Date().getTime()}`
      let o = $(document.getElementById(size.elem || '') || e.target)
      if(cmd == 'lock'){
        let position = o.offset()
        let box = {w: o.width(), h: o.height()}
        let wh = {
          w: size.w || box.w*2,
          h: size.h || box.h*2
        }
        wh.t = position.top-(wh.h-box.h)/2
        wh.l = position.left-(wh.w-box.w)/2
        $('.' + dom).append(`<div id="${id}" class="lock-base" style="background-color:rgba(155,235,255,0);z-index:1000;overflow:hidden;position:absolute;width:${wh.w}px;height:${wh.h}px;top:0;left:0"></div>`)
        e.target.__id__ = id
      }else{
        this.$nextTick(() => {
          setTimeout(() => {
            document.getElementById(id) && document.getElementById(id).remove()
          }, 0)
        })
      }
      return false
    },
    handleError (e,elem,i) {
      console.log(this.isErrorClick + '红ge')
      if (this.isErrorClick) {
        console.log(new Date().getTime(), 'handleError.lock')
        clearTimeout(this.isErrorClick)
        return
      }
      // this.isPadMask = new Date().getTime()
       this.$nextTick(() => {
        const dom = document.getElementsByClassName('yxp-paper-list-item')
        const su = dom[i].getElementsByTagName('img')[0]
        // console.log(su.offsetTop + '---' + su.y)
        let x = (document.body.clientWidth - 600) / 2 + 300
        let y = dom[i].offsetTop - document.getElementById("box").scrollTop + 85
        this.isErrorClick = true
        // this.makeLockTask(e, 'lock')
        this.noData.push(this.fillList[i])
        // let x = e.x + 300 - e.layerX
        // let y = e.y - (e.layerY - 35)
        // const dom = document.getElementsByClassName('yxp-paper-list-item')
        // const dom1 = document.getElementById('curl-paper')
        // const dom2 = document.getElementById('inner-paper')
        // console.log(this.iNow + '&&&&&&&&&&&&&&&&&&&&-----------')
        const dom1 = document.getElementsByClassName('more-paper')[this.iNow]
        const dom2 = dom1.getElementsByClassName('more-inner')[0]
        dom2.innerHTML = elem.word
        return new Promise((resolve) => {
          dom[i].style.transform = 'scale(.36)'
          dom[i].style.transition = 'all .32s ease'
          dom1.style.top = y + dom[0].clientHeight / 2 - 20 + 'px'
          dom1.style.left = x  + 'px'
          setTimeout(() => {
            dom[i].style.display = 'none'
            dom1.style.display = 'block'
            dom[i].style.transform = 'scale(1)'
            dom[i].style.transition = ''
            this.fillList.splice(i,1)

            // let scrollTop = this.fillList.length * (this.height / 5) - this.height
            // document.getElementById("box").scrollTop =  scrollTop
            // dom1.style.left = (document.body.offsetWidth - 810) / 2 + this.$refs.bottomNo.offsetLeft + 50 + 'px'
            dom1.style.left = this.$refs.bottomBg.offsetLeft + this.$refs.bottomYes.offsetLeft + 60 + 'px'
            dom1.style.transition = 'all .5s cubic-bezier(0.25,0.1,0.25,1)'
            dom1.style.top = this.$refs.bottomBg.offsetTop + this.$refs.bottomYes.offsetTop - 20 + 'px'
            dom2.style.transition = 'all .5s cubic-bezier(0.25,0.1,0.25,1)'
            this.isErrorClick = false
            this.iNow++
            if (this.fillList.length === 0) {
              this.iNow = 0
            }
            // 
            // console.log(this.curIndex + '+++++++' + i)
            this.curIndex = i > this.curIndex ? this.curIndex : this.curIndex - 1
            dom[i].style.display = 'flex'
            this.audio.src = 'https://data.e-school-kids.com/webcourse/word_in.mp3'
            this.audio.play().then((r)=>{}).catch((e)=>{})
            resolve()
          },322)
        }).then(() => {
          setTimeout(() => {
            dom1.style.display = 'none'
            dom1.style.left = '50%'
            dom1.style.top = 0
            dom1.style.transiton = ''
            dom2.style.transition = ''
            // this.makeLockTask(e, 'unlock')
            this.noNum++
            this.nowNum--
            console.log(document.getElementById("box").scrollTop + '这里的滚动条高度error')
            // setTimeout(() => {
            //   this.isPadMask = 0
            // }, this.maskTime)
          }, 500)
        })
      })
        
      
    },
    handleCenter (e) {
      let scrollTop = 0
      this.iNow = 0
     // this.height = +window.getComputedStyle(this.$refs.paperBox).height.replace('px','')
      if (this.isClick || this.isNoClick || this.totalNum === 0) {
        console.log(new Date().getTime(), 'handleCenter.lock')
        return
      }
      clearTimeout(this.timer)
      // this.isPadMask = new Date().getTime()
      this.isClick = true
      // this.makeLockTask(e, 'lock', {w: 120, h: 64}, 'center')
      this.fillList.push(this.dataList[this.cNum])
      this.len = this.fillList.length
      this.isOpen = true
      this.$nextTick(() => {
        this.timer = setTimeout(() => {
          const dom = document.getElementsByClassName('yxp-paper-list-item')
        this.domHeight = dom[0].clientHeight 
        // document.getElementById('paperBox').style.height = (this.domHeight + 20) * 5 + 'px'
       // let dec = this.fillList.length > 25 ? 19 : this.fillList.length / 2
       console.log(this.height + '---' + this.fillList.length * (this.domHeight + 20))
       let dt = this.height / 5
      //  let dt = (this.height / 5) - 20
          console.log(dt + '((((((((((((((((')
           if (this.fillList.length * dt  > this.height) {
             console.log(this.fillList.length * (this.domHeight + 20) + '&&&&&&&&&&&&' +  this.height + '没有高都了吗')
            scrollTop = this.fillList.length * dt - this.height
            // scrollTop = (this.fillList.length + 1) * dt - this.height
            let s = (this.fillList.length - 5) * (this.domHeight + 20)
            let n = this.fillList.length > 24 ? 7 : 3
            this.isFlex = false
            window[`bs:event:scroll:close`] = true
            console.log(scrollTop + '--------' + s + '************' + this.height)
            // - Math.ceil(this.fillList.length / 11) * 3
            // let le = this.fillList.length
            // if (le % 5 === 0) {
            //   document.getElementById("box").scrollTop =  scrollTop
            // } else if (le % 5 === 1) {
            //   document.getElementById("box").scrollTop =  scrollTop  - 0.55
            // } else if (le % 5 === 2) {
            //   document.getElementById("box").scrollTop =  scrollTop  - 0.19
            // } else if (le % 5 === 3) {
            //   document.getElementById("box").scrollTop =  scrollTop  - 0.73
            // } else if (le % 5 === 4) {
            //   document.getElementById("box").scrollTop =  scrollTop  - 0.37
            // } 
            document.getElementById("box").scrollTop =  scrollTop
            console.log(document.getElementById("box").scrollTop + '++++++++++++' + document.getElementById("box").scrollHeight)
            // document.getElementById("box").scrollTop = scrollTop
            
          }
         return new Promise(resolve => {
           
          // setTimeout(() =>{
            dom[this.fillList.length - 1].style.transform = 'translateY(0) scale(1)'
            dom[this.fillList.length - 1].style.opacity = 1
            dom[this.fillList.length - 1].style.transition = 'all .5s  cubic-bezier(1,.07,.05,.85)'
            this.audio.src = this.fillList[this.fillList.length - 1].project_voice
            this.audio.play().then((r)=>{}).catch((e)=>{})
           
            resolve()
         // }, 100)
        }).then(() => {
          // let dt = this.height / 5
          // console.log(dt + '((((((((((((((((')
          //  if (this.fillList.length * dt  > this.height) {
          //    console.log(this.fillList.length * (this.domHeight + 20) + '&&&&&&&&&&&&' +  this.height + '没有高都了吗')
          //   scrollTop = this.fillList.length * dt - this.height
          //   let s = (this.fillList.length - 5) * (this.domHeight + 20)
          //   let n = this.fillList.length > 24 ? 7 : 3
          //   this.isFlex = false
          //   window[`bs:event:scroll:close`] = true
          //   console.log(scrollTop + '--------' + s + '************' + this.height)
          //   // - Math.ceil(this.fillList.length / 11) * 3
          //   // let le = this.fillList.length
          //   // if (le % 5 === 0) {
          //   //   document.getElementById("box").scrollTop =  scrollTop
          //   // } else if (le % 5 === 1) {
          //   //   document.getElementById("box").scrollTop =  scrollTop  - 0.55
          //   // } else if (le % 5 === 2) {
          //   //   document.getElementById("box").scrollTop =  scrollTop  - 0.19
          //   // } else if (le % 5 === 3) {
          //   //   document.getElementById("box").scrollTop =  scrollTop  - 0.73
          //   // } else if (le % 5 === 4) {
          //   //   document.getElementById("box").scrollTop =  scrollTop  - 0.37
          //   // } 
          //   document.getElementById("box").scrollTop =  scrollTop
          //   console.log(document.getElementById("box").scrollTop + '++++++++++++' + document.getElementById("box").scrollHeight)
          //   // document.getElementById("box").scrollTop = scrollTop
            
          // }
          
          setTimeout(() =>{
          //  
          //  document.getElementById("box").scrollTop =  scrollTop
           window[`bs:event:scroll:close`] = false
            this.totalNum--
            this.cNum++
            if (this.totalNum === 0) {
            this.cNum = 0
            }
            this.isOpen = false
            this.isClick = false
            
            // this.makeLockTask(e, 'unlock')
          }, 600)
        })
        }, 100);
     })
     
     },
    handleNo (e) {
      if (this.isNoClick || this.isClick) {
        console.log(new Date().getTime(), 'handleNo.lock')
        return
      }
      clearTimeout(this.timer1)
     // document.getElementById("box").scrollTop = 0
      this.len = 0
      let scrollTop = 0
      // this.isPadMask = new Date().getTime()
      this.isNoClick = true
      this.iNow = 0
      // this.makeLockTask(e, 'lock', {w: 90, h: 53,}, 'no')
      this.noData.map(item => {
        item.num = 0
      })
       this.fillList.push(this.noData[0])
       this.len = this.fillList.length
       this.noData.splice(0,1)
      this.$nextTick(() => {
        this.timer1 = setTimeout(() => {
          const dom = document.getElementsByClassName('yxp-paper-list-item')
          let dt = this.height / 5
          console.log(dt + '((((((((((((((((')
           if (this.fillList.length * dt  > this.height) {
             console.log(this.fillList.length * (this.domHeight + 20) + '&&&&&&&&&&&&' +  this.height + '没有高都了吗')
            scrollTop = this.fillList.length * dt - this.height
            let s = (this.fillList.length - 5) * (this.domHeight + 20)
            let n = this.fillList.length > 24 ? 7 : 3
            this.isFlex = false
            window[`bs:event:scroll:close`] = true
            console.log(scrollTop + '--------' + s + '************' + this.height)
            // - Math.ceil(this.fillList.length / 11) * 3
            // let le = this.fillList.length
            // if (le % 5 === 0) {
            //   document.getElementById("box").scrollTop =  scrollTop
            // } else if (le % 5 === 1) {
            //   document.getElementById("box").scrollTop =  scrollTop  - 0.55
            // } else if (le % 5 === 2) {
            //   document.getElementById("box").scrollTop =  scrollTop  - 0.19
            // } else if (le % 5 === 3) {
            //   document.getElementById("box").scrollTop =  scrollTop  - 0.73
            // } else if (le % 5 === 4) {
            //   document.getElementById("box").scrollTop =  scrollTop  - 0.37
            // } 
            document.getElementById("box").scrollTop =  scrollTop
            console.log(document.getElementById("box").scrollTop + '++++++++++++' + document.getElementById("box").scrollHeight)
            // document.getElementById("box").scrollTop = scrollTop
            
          }
          return new Promise(resolve => {
            //setTimeout(() => {
              
            dom[this.fillList.length - 1].style.transform = 'translateY(0) scale(1)'
            dom[this.fillList.length - 1].style.opacity = 1
            dom[this.fillList.length - 1].style.transition = 'all .5s  cubic-bezier(1,.07,.05,.85)'
            this.audio.src = this.fillList[this.fillList.length - 1].project_voice
            this.audio.play().then((r)=>{}).catch((e)=>{})
            
            resolve()
          //}, 100)
          }).then(() => {
          //   let dt = this.height / 5
          // console.log(dt + '((((((((((((((((')
          //  if (this.fillList.length * dt  > this.height) {
          //    console.log(this.fillList.length * (this.domHeight + 20) + '&&&&&&&&&&&&' +  this.height + '没有高都了吗')
          //   scrollTop = this.fillList.length * dt - this.height
          //   let s = (this.fillList.length - 5) * (this.domHeight + 20)
          //   let n = this.fillList.length > 24 ? 7 : 3
          //   this.isFlex = false
          //   window[`bs:event:scroll:close`] = true
          //   console.log(scrollTop + '--------' + s + '************' + this.height)
          //   // - Math.ceil(this.fillList.length / 11) * 3
          //   // let le = this.fillList.length
          //   // if (le % 5 === 0) {
          //   //   document.getElementById("box").scrollTop =  scrollTop
          //   // } else if (le % 5 === 1) {
          //   //   document.getElementById("box").scrollTop =  scrollTop  - 0.55
          //   // } else if (le % 5 === 2) {
          //   //   document.getElementById("box").scrollTop =  scrollTop  - 0.19
          //   // } else if (le % 5 === 3) {
          //   //   document.getElementById("box").scrollTop =  scrollTop  - 0.73
          //   // } else if (le % 5 === 4) {
          //   //   document.getElementById("box").scrollTop =  scrollTop  - 0.37
          //   // } 
          //   document.getElementById("box").scrollTop =  scrollTop
          //   console.log(document.getElementById("box").scrollTop + '++++++++++++' + document.getElementById("box").scrollHeight)
          //   // document.getElementById("box").scrollTop = scrollTop
            
          // }
            
            setTimeout(() => {
              window[`bs:event:scroll:close`] = false
              this.noNum--
              // this.iNow++
              // if (this.noNum === 0) {
              //   this.iNow = 0
              // }
              this.isNoClick = false
              
              // this.makeLockTask(e, 'unlock')
            }, 600)
          })
       }, 100)
        
      })
     
    },
    handleBack () {
      if (this.data.status) {
        if (this.fillList.length > 0 || this.totalNum > 0) {
          this.$toast('您还有未检测完的纸条')
          return
        } else if (this.totalNum === 0 && this.noNum > 0 && this.fillList.length === 0) {
          this.$toast('不会的词还没学完哦~')
          return
        }
      } else {
        if (this.totalNum <= this.dataList.length - 1) {
          this.$toast('完成剪纸条才可以退出哦~')
          return
        }
      }
      this.isBack = true
    },
    handlePrev () {
      console.log(this.$route.query.isPage)
      let isPage = +this.$route.query.isPage
      let page = +this.page
      let total = this.inintData.length
      if (total === 1) {
        page = total
      } else if (page === total) {
        if (isPage === 0) {
          page = page - 1
        } else {
          page = total
        }
      } else {
        if (isPage === 0) {
          page = page - 1
        } else {
          page = page + 1
        }
      }
      this.$router.replace({
        path: '/wordRemember/wordMemory',
        query: {
          page: page,
          package_id: this.$route.query.package_id,
          course_type: this.$route.query.course_type
        }
      })
      // this.$router.go(-1)
    },
    // 再查一遍
    handleAgain () {
      if (this.totalNum === 0 && this.noNum === 0 && this.yesNum === this.dataList.length) {
        this.$lay.show()
       document.getElementById("box").scrollTop = 0
       this.isFinish = false
       this.len = 0
       this.getOrder()
      } else if (this.totalNum === 0 && this.noNum > 0 && this.fillList.length === 0) {
        this.$toast('不会的词还没学完哦~')
      } else {
        console.log(this.totalNum + '*****' + this.noNum + '*****' + this.yesNum + '*******' + this.dataList.length)
        this.$toast('您还有未学完的纸条')
      }
    },
    getOrder () {
      let item = document.getElementsByClassName('again-list-item')
      let iNow = 0
      this.orderTimer = setInterval(() => {
        item[iNow].style.transform = 'translateX(200px) scale(.9)'
         item[iNow].style.opacity = 1
         item[iNow].style.transition = '.2s ease-out'
         if (!this.isFinish) {
              this.totalNum++
              this.yesNum--
              if (this.yesNum < 0) {
                this.yesNum = 0
              }
              iNow++
               if (iNow === this.againNum) {
                clearInterval(this.orderTimer)
                this.againNum = 0
                this.yesNum = 0
                let dataList = JSON.stringify(randWord(JSON.parse(JSON.stringify(this.dataList))))
                this.isPadMask = new Date().getTime()
                randomArr({ type: dataList }).then(res => {
                  if (res.code === 1) {
                    this.$lay.hide()
                    this.dataList = JSON.parse(res.data)
                    this.dataList.map(item => {
                      item.num = 0
                    })
                    this.isFinish = true
                    this.iNow = 0
                  } else if (res.code === '10001' || res.code === 10001) {
                    this.$lay.hide()
                    this.$toast('token过期，请重新登录')
                  } else {
                    this.$lay.hide()
                    this.$toast(res.info)
                  }
                  // setTimeout(() => {
                  //   this.isPadMask = 0
                  // }, this.maskTime)
                })
              }
            }
        },200)
    },
    // 播放语音
    handlePlay (item, i, type) {
      let num = item.num
      num++
      if (num > 2) num = 1
      item.num = num
      if (type === 0) {
        this.$set(this.moveList, i, item)
      } else {
        this.$set(this.fillList, i, item)
      }
      this.audio.src = item.project_voice
      this.audio.play().then((r)=>{}).catch((e)=>{})
      if (type === 0) {
        if (!this.isSimulate) {
          this.curIndex = i
        }
        this.moveList.map((elem,index) => {
          if (index !== i) {
            this.$set(elem, 'num', 0)
          }
        })
      } else {
        this.curIndex = i
        this.fillList.map((elem,index) => {
          if (index !== i) {
            this.$set(elem, 'num', 0)
          }
        })
      }
      
      console.log(this.dataList)
    },
    // 混组检查
    handleCheck () {
      if (this.totalNum > 0 || this.fillList.length > 0) {
        this.$toast('您还有未检测完的纸条')
        return
      }
      if (this.totalNum === 0 && this.noNum > 0 && this.fillList.length === 0) {
        this.$toast('不会的词还没学完哦~')
        return
      }
      let data = storage.get('paperData')
      // this.inintData = data
      let res = data.filter(item => {
        return item.status === true
      })
      if (res.length < 2 && this.noNum === 0 && this.totalNum === 0 && this.fillList.length === 0) {
        this.$toast('只学了一组单词，没有其他单词可以混合哦~')
        return
      }
      document.getElementById("box").scrollTop = 0
      this.len = 0
      this.isShow = true
      this.nowNum = 0
      this.delArr = []
      this.fillList = []
    },
    handleGroup (item) {
      let check = item.isCheck ? false : true
      this.$set(item, 'isCheck', check)

    },
    handleRemember () {
      let checkList = this.inintData.filter(v => v.isCheck)
      if (!checkList.length) {
        this.$toast('请选择要混合的组')
        return
      }
      this.$lay.show()
      let data = []
      this.fillList = []
      this.inintData.map(item => {
        if (item.isCheck && item.status) {
          item.data.map(elem => {
            data.push(elem)
          })
        }
      })
      let dataList = JSON.stringify(randWord(JSON.parse(JSON.stringify(data))))
      // this.isPadMask = new Date().getTime()
      randomArr({ type: dataList }).then(res => {
        if (res.code === 1) {
          this.$lay.hide()
          this.dataList = JSON.parse(res.data)
          this.totalNum = this.dataList.length
          this.nowNum = 0
          this.yesNum = 0
          console.log(this.dataList)
          this.isShow = false
        } else if (data.code === '10001' || data.code === 10001) {
          this.$lay.hide()
          this.$toast('token过期，请重新登录')
        } else {
          this.$lay.hide()
          this.$toast(data.info)
        }
        // setTimeout(() => {
        //   this.isPadMask = 0
        // }, this.maskTime)
      })
      
    }
  }
}
</script> 
<style lang="less" scoped>
.lock-base {
  position: absolute;
  background-color: rgba(255,255,255,0);
  z-index: 1000;
}
.pad-mask {
  position: absolute;
  background-color: rgba(255,255,255,0);
  left: 0;
  top: 0;
  z-index: 1000;
  width: calc(100%); /* no */
  height: calc(100%); /* no */
}
@keyframes start {
  0% {
    transform: translateY(800px) scale(.2);
  }
  100% {
    transform: translateY(0) scale(1);
  }
}
@keyframes move {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(670px);
  }
}
@keyframes identifier {
  0% {
    transform: translateY(0) scale(1) rotateX(15deg)
  }
  100% {
    transform: translateY(600px) scale(0.2) rotate(0)
  }
}
.yxp-paper {
  position: relative;
  // position: fixed;
  // left: 0;
  // top: 0;
  display: flex;
  width: 100%;
  height: 100vh;
  background:radial-gradient(circle,rgba(23,162,125,1) 0%,rgba(7,113,85,1) 100%);
  overflow: hidden;
  &-top {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 50px;
    z-index: 20;
    &-l {
      position: absolute;
      left: 40px;
      top: 27px;
      width: 30px;
      height: 27px;
      cursor: pointer;
    }
    &-r {
      position: absolute;
      right: 40px;
      top: 27px;
      cursor: pointer;
      span {
        font-size: 20px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #fff;
        cursor: pointer;
        &:first-child {
          margin-right: 50px;
        }
      }
    }
  }
  &-list {
    position: relative;
    width: 600px;
    height: 100%;
    margin: 70px auto;
    // background: #ff0000;
    .paper-bg {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%,-50%);
      width: 319px;
      height: 414px;
    }
     &::-webkit-scrollbar { width: 0 !important }
    .active {
      .item-l {
        span {
          font-size: 30px;
          font-weight: bold;
        }
      }
      .item-r {
        span {
          font-size: 24px;
          font-weight: 400;
        }
      }
    }
    .yxp-paper-box {
      position: relative;
      display: flex;
      justify-content: flex-end;
      flex-direction: column;
      width: 600px;
      min-height: 350px;
      height: calc(100vh - 190px);
      overflow: hidden;
      z-index: 12;
      // background: pink;
    }

    .yxp-paper-flex {
      // display: flex;
      // justify-content: flex-end;
      // flex-direction: column;
      overflow-y: auto;
      overflow-x: hidden;
      &::-webkit-scrollbar { width: 0 !important }
      // min-height: calc(100vh - 190px);
    }
    &-item {
      flex-shrink: 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 600px;
      height: calc((100vh - 290px) / 5);
      min-height: 50px;
      background: #fff;
      border-radius: 10px;
      transform: translateY(800px) scale(.2);
      margin-bottom: 20px;
      opacity: 0;
      .item-l,.item-r {
        img {
          width: 30px;
          height: 30px;
        }
        span {
          font-size: 24px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #333333;
        }
      }
      .item-l {
        display: flex;
        align-items: center;
        img {
          margin-left: 27px;
          margin-right: 40px;
        }
      }
      .item-r {
        display: flex;
        align-items: center;
        img {
          margin-right: 27px;
          margin-left: 40px;
        }
      }
    }
  }
  &-bottom {
    position: absolute;
    left: 50%;
    bottom: -2px;
    transform: translateX(-50%);
    width: 809px;
    height: 87.5px;
    background: url('../../../assets/word/paper-bottom.png') no-repeat;
    background-size: 100% 100%;
    z-index: 10;
    .yes {
      position:absolute;
      left: 151px;
      top: 27px;
      width: 88px;
      height: 53px;
      background: url(../../../assets/word/paper-yes.png) no-repeat;
      background-size: 100% 100%;
      z-index: 10;
      cursor: pointer;
      .num {
        position: absolute;
        left: 50%;
        top: -4px;
        transform: translateX(-50%);
        font-size: 20px;
        font-family: MicrosoftYaHei-Bold;
        color: #006042;
      }
      .text {
        position: absolute;
        left: 50%;
        bottom: 9px;
        transform: translateX(-50%);
        display: block;
        color: #F8F8F8;
        font-size: 12px;
        font-family: MicrosoftYaHei-Bold;
      }
      .again-list {
        position: absolute;
        left: -4px;
        top: 10px;
        z-index: 11;
        
        &-item {
          position: absolute;
          left: 0;
          top: 0;
          width: 80px;
          height: 20px;
          background: #fff;
          opacity: 0
        }
      }
    }
    .center {
      position: absolute;
      left: 342px;
      top: 16px;
      width: 113px;
      height: 64px;
      background-size: 100% 100%;
      cursor: pointer;
      z-index: 15;
      img {
        position: absolute;
        left: 0;
        top: 0;
        width: 113px;
        height: 64px;
      }
      .num {
        position: absolute;
        left: 50%;
        top: -8px;
        transform: translateX(-50%);
        color: #A04D0E;
        font-size: 30px;
        font-family: MicrosoftYaHei-Bold;
      }
    }
    .no {
      position: absolute;
      right: 149px;
      top: 27px;
      width: 89px;
      height: 53px;
      background: url(../../../assets/word/paper-no.png) no-repeat;
      background-size: 100% 100%;
      cursor: pointer;
      z-index: 10;
      .num {
        position: absolute;
        left: 50%;
        top: -4px;
        transform: translateX(-50%);
        color: #BA0620;
        font-size: 20px;
        font-family: MicrosoftYaHei-Bold;
      }
      .text {
        position: absolute;
        left: 50%;
        bottom: 9px;
        transform: translateX(-50%);
        display: block;
        color: #F8F8F8;
        font-size: 12px;
        font-family: MicrosoftYaHei-Bold;
      }
    }
  }
  &-pop {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    width: 480px;
    height: 580px;
    text-align: center;
    background: #fff;
    border-radius: 20px;
    z-index: 1200;
    .close {
      position: absolute;
      right: 20px;
      top: 15px;
      width: 20px;
      height: 20px;
      background: url(../../../assets/word/close-icon.png) no-repeat;
      background-size: 20px 20px;
      cursor: pointer;
      &:hover {
        background-image: url(../../../assets/word/close-hover.png);
      }
    }
    .title {
      color: #333333;
      font-size: 24px;
      font-family: Microsoft YaHei;
      font-weight: bold;
      padding-top: 41px;
    }
    .paper-pop-list {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      flex-wrap: wrap;
      margin-top: 47px;
      padding-left: 67px;
      padding-right: 67px;
      .paper-pop-list-item {
        margin-right: 50px;
        margin-bottom: 33px;
        cursor: pointer;
        img {
          width: 80px;
          height: 48px;
        }
        .text {
          color: #A0A0A0;
          font-size: 20px;
          font-family: Microsoft YaHei;
        }
        &:nth-child(3n) {
          margin-right: 0;
        }
      }
    }
    .btn {
        position: absolute;
        left: 50%;
        bottom: 70px;
        transform: translateX(-50%);
        width: 350px;
        height: 50px;
        line-height: 50px;
        text-align: center;
        font-size: 18px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #fff;
        background: #27BFA3;
        border-radius: 100px;
        margin: 7px auto 0;
        cursor: pointer;
        &:hover {
          background: #18A38A;
        }
    }
  }
  .paper-simulate-back {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    width: 360px;
    text-align: center;
    background: #fff;
    border-radius: 20px;
    padding-bottom: 40px;
    z-index: 1100;
    .close {
      position: absolute;
      right: 20px;
      top: 20px;
      width: 20px;
      height: 20px;
      cursor: pointer;
    }
    .paper {
      display: inline-block;
      width: 280px;
      height: 200px;
      margin: 50px auto 30px;
    }
    .tips {
      font-size: 24px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #333;
    }
    .btn {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 20px;
      &-item {
        width: 130px;
        height: 50px;
        line-height: 50px;
        text-align: center;
        font-size: 18px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #fff;
        background: #27BFA3;
        border-radius: 100px;
        cursor: pointer;
        &:first-child {
          margin-right: 20px;
        }
        &:hover {
          background: #18A38A;
        }
      }
    }
  }
}
.paper-simulate-list {
  // position: fixed;
  // left: 50%;
  // top: 50%;
  // transform: translate(-50%,-50%);
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 600px;
  height: 600px;
  margin: calc((100vh - 600px) / 2) auto;
  z-index: 1100;
  .active {
    .paper-simulate-list-item-l {
      font-size: 30px;
      font-weight: bold;
    }
    .paper-simulate-list-item-r {
      font-size: 24px;
      font-weight: 400;
    }
  }
  .down {
    animation: identifier .8s ease 3s;
  }
  &-item {
    position: absolute;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 119px;
    background: #fff;
    border-bottom: 1px dotted #C3C3C3;
    transition: all 1s ease-out;
    &:last-child {
      border: none;
    }
    .on {
      animation: move 1s ease-out;
      animation-fill-mode: forwards;
    }
    &-draw {
      position: absolute;
      left: -132px;
      top: 82px;
      width: 94px;
      height: 80px;
      // background: url(../../../assets/word/paper-ani.png) no-repeat;
      // background-position: 0 0;
      // background-size: 94px 80px;
      // background-position: 0 0;
      img {
        width: 94px;
        height: 81px;
      }
      span {
        display: inline-block;
        width: 42px;
        height: 1px;
        // border-bottom: 1px dotted #ff0000;
      }
    }
    &-l {
      font-size: 24px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #000;
      padding-left: 70px;
    }
    &-r {
      padding-right: 70px;
    }
    &:nth-child(1) {
      top: 0;
    }
    &:nth-child(2) {
      top: 119px;
    }
    &:nth-child(3) {
      top: 238px;
    }
    &:nth-child(4) {
      top: 357px;
    }
    &:nth-child(5) {
      top: 476px;
    }
  }
  
}
.curl-paper {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: 74px;
  height: 20px;
  font-size: 12px;
  border-radius: 4px;
  opacity: .8;
  z-index: 11;
  display: none;
  // overflow: hidden;
  .inner-paper {
    width: 74px;
    height: 20px;
    background: #fff;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}
</style>
